<script setup>
import Title from '@/components/title.vue';
import videoJK from './videoJK.vue';
import bdpng from '@/assets/img/bd.png'
import messageList from './message-list.vue';
import DataOverview from './data-overview.vue'
</script>

<template>
    <div class="page">
        <div class="top">
            <Title title="安防概况"></Title>
            <DataOverview />>
        </div>
        <div class="mid">
            <Title title="摄像头视频监控"></Title>
            <div class="videoList">
                <videoJK :imgSrc="bdpng" title="星云广场云台"></videoJK>
                <videoJK :imgSrc="bdpng" title="星云广场云台"></videoJK>
                <videoJK :imgSrc="bdpng" title="星云广场云台"></videoJK>
            </div>
        </div>
        <div class="bottom">
            <Title title="摄像头视频监控"></Title>
            <div class="list">
                <messageList></messageList>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.page {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 50px);
    margin-left: 20px;
    font-size: 20rem;

    .top {
        margin-bottom: 5px;

        flex: 0 0 18%;
        box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
    }

    .mid {
        flex: 0 0 18%;
        box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
        margin-bottom: 10px;

        .videoList {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: calc(100% - 40px);
            width: 100%;
        }
    }

    .bottom {
        flex: 0 0 60%;
        box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
        height: 100%;

        .list {
            height: 55%;
            width: 100%;
        }
    }


}
</style>
